<template>
  <div class="user-edit-container">
    <!-- Header 区域 -->
    <van-nav-bar
      title="编辑资料"
      left-arrow
      @click-left="$router.back()"
      fixed
    />

    <!-- 用户资料 -->
    <van-cell-group class="action-card">
      <!--
        1. 点击头像区域唤起本地选择框
           input type = file
           核心：点击一个普通的img 但是效果上相当于点击了 input框
           解决方案: 准备一个隐藏状态的类型为file的input框 不显示 但是可以借助它唤起本地文件的能力

        2. 选择好本地图片之后 点击选择框的确定 自动进行上传操作
           1. 拿到图片对象：选择确定一张图片之后 会自动触发input的change事件，在事件回调中通过事件对象e
           拿到当前选择的图片对象
           2. 调用上传接口

        3. 上传成功之后需要新头像替换老头像进行显示

        整个流程:
          1. 普通的标签并不具备唤起本地文件选择的能力 所以准备了一个类型为file的input框 目的是为了借助它唤起文件选择的能力
          2. 虽然点击的是普通的标签 但是实际上触发的是 input框的click方法 模拟点击调用
          3. input被点击之后唤起本地文件选择 点击确定之后 触发了input change事件 目的拿到file对象 [e.target.files[0]]
          4. 通过原生的FormData实例化一个formData对象出来 调用append方法按照后端接口的要求 准备参数
          5. 把formData参数放到请求体  axios-data参数的位置 自动知道你要进行上传了 自动修改contentType
       -->
      <van-cell title="头像" is-link center>
        <template #default>
          <van-image round class="avatar" :src="userData.photo" @click="clickImg" />
          <input type="file" style="display:none" ref="input" @change="changeImg">
        </template>
      </van-cell>
      <van-cell title="名称" :value="userData.name" is-link @click="userName" />
      <van-cell title="生日" :value="userData.birthday" is-link @click="editBirthday" />
    </van-cell-group>
    <!-- 编辑名称弹窗组件 -->
    <van-dialog v-model="showUserName" title="标题" show-cancel-button @confirm="EditName">
      <van-field v-model="NameValue" label="名称" placeholder="请输入用户名" ref="input" />
    </van-dialog>
    <!-- 生日弹窗组件 -->
    <van-popup
    v-model="showBirthday"
    :lock-scroll="true"
    round
    position="bottom"
    :style="{ height: '50%' }" >
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择您的生日"
        @cancel="showBirthday=false"
        @confirm="changeBirthday"
      />
    </van-popup>
  </div>
</template>

<script>
import { getUserApi, getUserImgApi, updateProfileAPI } from '@/api'
// 引入时间处理插件
import dayjs from 'dayjs'
export default {
  name: 'UserEdit',
  data () {
    return {
      // 用户基本信息
      userData: {},
      // 控制名称编辑弹窗
      showUserName: false,
      // 编辑名称表单双向绑定的数据
      NameValue: '',
      // 控制选择生日的弹窗
      showBirthday: false,
      // 时间选择组件双向绑定的数据
      currentDate: new Date()
    }
  },
  methods: {
    // 修改生日
    async changeBirthday () {
      // 更改时间格式
      const birthdayTime = dayjs(this.currentDate).format('YYYY-MM-DD')
      await updateProfileAPI({
        ...this.userData,
        birthday: birthdayTime
      })
      this.userData.birthday = birthdayTime
      this.showBirthday = false
    },
    // 点击编辑生日
    editBirthday () {
      this.showBirthday = true
      this.currentDate = new Date(this.userData.birthday)
    },
    // 提交确认
    async EditName () {
      await updateProfileAPI({
        ...this.userData,
        name: this.NameValue
      })
      // 乐观更新
      this.userData.name = this.NameValue
    },
    // 编辑用户名
    userName () {
      this.showUserName = true
      this.$nextTick(() => {
        this.$refs.input.focus()
      })
    },
    // 点击更换头像
    clickImg () {
      this.$refs.input.click()
    },
    // input 发成改变
    async changeImg (e) {
      // 如果用户没有选文件  直接退出
      if (e.target.files === 0) {
        return false
      }
      // 找到上传的文件
      const file = e.target.files[0]
      // 通过原生的FormData 实例化一个对象 通过append方法 按照后端姐接口要求 准备参数
      const fd = new FormData()
      fd.append('photo', file)
      const { data } = await getUserImgApi(fd)
      // 乐观更新
      this.userData.photo = data.photo
    },
    // 初始化用户基本信息
    async FetchUser () {
      const { data } = await getUserApi()
      this.userData = data
      this.NameValue = data.name
    }
  },
  mounted () {
    this.FetchUser()
  }
}
</script>

<style lang="less" scoped>
.user-edit-container {
  padding-top: 46px;
  .avatar {
    width: 50px;
    height: 50px;
  }
}
</style>
